<template>
    <div class="box_cont">
        <!-- 学前检测、复习 -->
        <div class="flex_center_center h_full justify-between" v-loading="loading" v-if="step == 1">
            <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none" />
            <div class="title_cont" v-if="box == 0">
                <div class="right">
                    <div class="select_cont">
                        <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
                    </div>
                </div>
                <h2>学前检测</h2>
                <div class="">
                    <div class="select_cont">
                        <el-select v-model="chooseCourse" placeholder="请选择词库" @change="changeCourse" :popper-append-to-body="false">
                            <el-option
                                v-for="item in courseData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                />
                        </el-select>
                    </div>
                </div>
            </div>

            <div class="title_cont" v-else>
                <div class="w-full flex_center_between">
                    <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
                    <h2 style="text-align: center;width: 100%;">复习</h2>
                    <div></div>
                </div>
            </div>

            <!-- 课程结束倒计时 -->
            <learnTime :timeStr="timeStr" @detection="detection" v-if="learnInfo.learnType == 1"></learnTime>

            <div class="test_cont">
                <div class="word_cont flex_center_between cur transition" v-for="(item, index) in courseWords" :key="index">
                    <chooseWord
                        :word="item"
                        :index="index"
                        :knowChooseArr="knowWords"
                        :noKnowChooseArr="noKnowWords"
                        :translationShow="translationShow[index] == 2"
                        @chooseWordFun="chooseWordFun"
                        @playAudio="playAudio"
                        :soundmark="Boolean(translationShow[index])"
                    />
                </div>
            </div>

            <div class="attend_btn flex_center_between" v-if="box == 0">
                <div>已选择 <span class="num">{{ noKnowWords.length }} </span>个单词</div>
                <div>
                    <el-button style="width: 20.8rem;font-size:2rem;" type="warning" @click="autoChooseFun" v-if="!isAll">自动选择</el-button>
                    <el-button style="width: 20.8rem;font-size:2rem;" type="warning" @click="cancelAllChooseFun" v-else>全部取消</el-button>
                    <el-button style="width: 20.8rem;font-size:2rem;" type="primary" @click="startKnow">开始识记</el-button>
                </div>
            </div>
            <div class="attend_btn flex_center_between" v-else>
                <div>正确 <span class="num1" style="color: #40D463;">{{ knowWords.length }}</span> 个</div>
                <div>错误 <span class="num2" style="color: #FF5252;">{{ noKnowWords.length }}</span> 个</div>
                <div>
                    <el-button id="fullscreen_button" style="width: 15rem;font-size:2rem;background: #F69B2C;border:1px solid #F69B2C;" type="primary" @click="playAll">
                        <div class="flex_c_c cur">播放</div>
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 15rem;font-size:2rem;background: #F69B2C;border:1px solid #F69B2C;" type="primary" @click="autoChooseFun" v-if="!isAll">
                        <div class="flex_c_c cur">全选</div>
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 15rem;font-size:2rem;background: #F69B2C;border:1px solid #F69B2C;" type="primary" @click="cancelAllChooseFun" v-if="isAll">
                        <div class="flex_c_c cur">取消全选</div>
                    </el-button>
                    <template v-if="noKnowWords.length > 0">
                        <el-button style="width: 15rem;font-size:2rem;" type="primary" @click="startKnow">
                            <div class="flex_c_c cur">确认提交</div>
                        </el-button>
                    </template>
                    <template v-else>
                        <el-button style="width: 15rem;font-size:2rem;" type="primary" @click="submitLearn()" :loading="submitLoading">
                                确认提交
                        </el-button>
                    </template>
                </div>
            </div>
        </div>
        <!-- 单词识记 -->
        <remember v-if="step == 2" :timeStr="timeStr"  @detection="detection" :words="currentWords" :group="group" :totalGroup="totalGroup" :learnType="learnInfo.learnType" :box="box" @changeStep="changeStep" @backFn="backFn"></remember>
        <!-- 剪纸盒 -->
        <cutbox v-if="step == 3" ref="cutbox" @detection="detection" :timeStr="timeStr" :words="currentWords" :group="group" :totalGroup="totalGroup" :titleMap="cutboxTitle" :mixGroup="mixGroup" :learnType="learnInfo.learnType" @mixGroupFn="mixGroupFn" @learnFinishFn="learnFinishFn" @nextGroupFn="nextGroupFn" @backFn="backFn"/>
        <!-- 学后检测 -->
        <div class="box_cont flex_center_center justify-between" v-if="step == 4" v-loading="loading">
            <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none;"></audio>
            <div class="title w-full">
                <div class="w-full flex_center_between">
                    <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
                    <h2>学后检测</h2>
                    <div></div>
                </div>
            </div>
            <div class="test_cont h_full">
                <div class="word_cont flex_center_between cur transition" v-for="(item, index) in examWords" :key="index">
                    <chooseWord
                        :word="item"
                        :index="index"
                        :knowChooseArr="rightWords"
                        :noKnowChooseArr="wrongWords"
                        :translationShow="translationShow[index] == 2"
                        :soundmark="Boolean(translationShow[index])"
                        @chooseWordFun="chooseExamWordFun" @playAudio="playAudio"
                    ></chooseWord>
                </div>
            </div>
            <div class="attend_btn flex_center_between">
                <div class="flex_center">
                    <div style="margin-right: 40px;">正确 <span class="num1" style="color: #40D463;">{{ rightWords.length }}</span> 个</div>
                    <div>错误 <span class="num2" style="color: #FF5252;">{{ wrongWords.length }}</span> 个</div>
                </div>
                <div>
                    <el-button style="width: 208px" type="primary" :loading="submitLoading" @click="submitLearn">确认提交</el-button>
                </div>
            </div>
            <div class="dialog_box flex_center_center" v-if="isDialog">
                <div class="detail_cont flex_center_center">
                    <img src="@/assets/img/ikon.png" class="result_bg" />
                    <p class="row_text flex_c_c">正确<span class="num1" style="color: #40D463;margin: 0 10px;"> {{ rightWords.length }} </span>个 <span class="line">|</span> 错误<span class="num2" style="color: #FF5252;margin: 0 10px;"> {{ wrongWords.length }} </span>个</p>
                    <div class="btn_cont flex" v-if="userId">
                        <el-button class="dialog_btn1 cur" @click="continueLearn">继续学习</el-button>
                        <el-button @click="endLearn(1)" class="dialog_btn cur" type="primary">结束学习，并创建抗遗忘复习</el-button>
                    </div>
                    <div class="btn_cont flex" v-else>
                        <el-button class="dialog_btn1 cur" @click="continueLearn">继续学习</el-button>
                        <el-button @click="endLearn(2)" class="dialog_btn cur" type="primary" :loading="submitLoading">结束学习</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 创建抗遗忘 -->
        <studyTime v-if="step == 5" :loading="cycleLoading" @submitCycel="submitCycelFn" @backFn="backFn"></studyTime>
    </div>

</template>

<script>
import { in_array } from '@/utils/index.js'
import tool from '@/utils/tool';
import { courseList, courseWordsList } from '@/api/course.js'
import { learnDetail, learnSubmit, endLearn, changeLearnCourse, savePrestudyWord } from '@/api/learn.js'
import { reviewCycleCreate } from '@/api/reviewCycle.js'
import chooseWord from './components/chooseWord.vue'
import remember from './remember.vue'
import cutbox from './cutbox.vue'
import bear_content from '@/views/components/bear_content.vue'
import studyTime from './studyTime.vue'
import learnTime from './components/learntime.vue'
export default {
    components: {
        chooseWord,
        remember,
        cutbox,
        bear_content,
        studyTime,
        learnTime
    },
    props: {
        bearRef: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            in_array,
            step: 1,
            loading: false,
            cycleLoading: false,
            submitLoading: false,
            box: 0,
            learnId: 0,
            userId: 0,
            chooseCourse: 0,
            learnInfo: {},
            courseData: [], //课程列表
            courseWords: [], //课程词汇
            voiceUrl: '',
            wordPlayStatus: [],
            translationShow: [],
            currentPlayIndex: 0,
            allPlayIndex: 0,
            knowWords: [],//选择的认识的词
            noKnowWords: [],//选择的不认识的词
            isDialog: false,
            isAll: false,
            mixGroup: 0, //当前混组
            group: 0,//当前第几组
            learnedGroup: 0, //已学完的最新组
            totalGroup: 0,//总共几组
            currentWords: [], //当前组词汇
            groupWordList: [], //按组分的全部词汇
            cutboxTitle: '',
            examWords: [], //检测的词
            rightWords: [], //正确的词
            wrongWords: [], //错误的词
            timeStr:'',
            isDialog1: true,
            category: 1
        }
    },
    mounted(){
        this.learnId = this.$route.query.learnId
        this.category = this.$route.query.category
        this.box = this.$route.query.box
        this.initData()
        this.getLearnInfo()
    },
    methods:{
        initData() {
            this.noKnowWords = []
            this.knowWords = []
            this.rightWords = []
            this.wrongWords = []
        },
        getLearnInfo() {
            this.loading = true
            learnDetail({id: this.learnId}).then(res => {
                this.timeStr = res.data.finishTime
                this.loading = false
                this.learnInfo = res.data
                this.chooseCourse = this.learnInfo.course ? this.learnInfo.course.id : ''
                this.userId = this.learnInfo.user ? this.learnInfo.user.id : 0
                this.getCourseList()
                this.getWordsList()
            })
        },
        getCourseList() {
            let param = {}
            if (this.learnInfo.learnType == 2 || this.learnInfo.courseType.value == 4) {
                param.isTrial = 1
            }else {
                param.userId = this.userId
            }
            param.categoryId = this.category
            courseList(param).then(res => {
                this.courseData = res.data
            })
        },
        getWordsList() {
            let courseId = this.learnInfo.course ? this.learnInfo.course.id : 0
            courseWordsList({
                courseId: courseId,
                userId: this.userId,
                box: this.box
            }).then(res => {
                this.courseWords = res.data
            })
        },
        chooseWordFun(type, word) {
            if (type == 1) {
                if (this.in_array(word.id, this.knowWords)) {
                    this.knowWords.splice(this.knowWords.indexOf(word.id), 1)
                } else {
                    this.knowWords.push(word.id)
                }
                if (this.in_array(word.id, this.noKnowWords)) {
                    this.noKnowWords.splice(this.noKnowWords.indexOf(word.id), 1)
                }
            } else if (type == 2) {
                if (this.noKnowWords.length >= 45) {
                    this.$message.error({ el: this.bearRef.$el, message: '最多只能选择45个单词' });
                    return false;
                };

                if (this.in_array(word.id, this.noKnowWords)) {
                    this.noKnowWords.splice(this.noKnowWords.indexOf(word.id), 1)
                } else {
                    this.noKnowWords.push(word.id)
                }
                if (this.in_array(word.id, this.knowWords)) {
                    this.knowWords.splice(this.knowWords.indexOf(word.id), 1)
                }
            }
        },
        //自动选择
        autoChooseFun() {
            this.isAll = true
            let words = this.noKnowWords
            this.courseWords.forEach((item, ele) => {
                if (ele <= 44 && words.length < 45 && !this.in_array(item.id, this.noKnowWords) && !this.in_array(item.id, this.knowWords)) {
                    words.push(item.id)
                }
            })
            this.noKnowWords = words
        },
        //取消全部选择
        cancelAllChooseFun() {
            this.isAll = false
            this.noKnowWords = []
        },
        //开始识记
        startKnow() {
            if (this.noKnowWords.length < 1) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择单词' })
                return false
            }
            if (this.noKnowWords.length > 45) {
                this.$message.error({ el: this.bearRef.$el, message: '选择的单词不能超过45个' })
                return false
            }
            this.translationShow = []
            this.totalGroup = Math.ceil(this.noKnowWords.length / 5)

            let groupWordList = []
            let words = []
            let preWordIds = []
            this.courseWords.forEach((item, ele) => {
                if (this.in_array(item.id, this.noKnowWords)) {
                    preWordIds.push(item.id)
                    words.push(item)
                }
            })
            //按每5个一组进行分组
            for (let i = 0; i < this.totalGroup; i++) {
                groupWordList.push(words.slice(i * 5, (i + 1) * 5))
            }
            this.groupWordList = groupWordList
            this.currentWords = groupWordList[0]

            // 保存学前检测选择的词
            this.loading = true
            savePrestudyWord({learnId: this.learnId, words: preWordIds}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.group ++
                    this.step ++
                    this.cutboxTitle = '第1组'
                }
            }).finally(() => {
                this.loading = false
            })

        },
        //切换下一组
        nextGroupFn() {
            this.group ++
            if (this.group <= this.totalGroup) {
                this.currentWords = this.groupWordList[this.group - 1]
                this.step = 2
                this.cutboxTitle = '第' + this.group + '组'
            }
        },
        //混组检查
        mixGroupFn() {
            //混组检查
            if (this.totalGroup == 1) {
                this.currentWords = this.groupWordList[0]
                this.cutboxTitle = '全部混组'
                this.mixGroup = 1
                this.learnedGroup = 1
                this.$refs.cutbox.initData()
            }else{
                this.mixGroup ++
                let words = []

                this.groupWordList.forEach((item, ele) => {
                    if (ele <= this.group - 1) {
                        item?.forEach?.((item1, ele1) => {
                            words.push(item1)
                        })
                    }
                })
                this.currentWords = words

                switch(this.totalGroup){
                    case 2:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 3:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 4:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 5:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else if (this.mixGroup == 3) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4])) {
                                    item.forEach((item1, ele1) => {
                                        words.push(item1)
                                    })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 6:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else if (this.mixGroup == 3) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5组'
                        }else if (this.mixGroup == 4) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4,5])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5、6组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 7:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else if (this.mixGroup == 3) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5组'
                        }else if (this.mixGroup == 4) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4,5])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5、6组'
                        }else if (this.mixGroup == 5) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [0,1,2,3,4,5])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第1、2、3、4、5、6组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 8:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else if (this.mixGroup == 3) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5组'
                        }else if (this.mixGroup == 4) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4,5])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5、6组'
                        }else if (this.mixGroup == 5) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [0,1,2,3,4,5])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第1、2、3、4、5、6组'
                        }else if (this.mixGroup == 6) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [6,7])) {
                                    item.forEach((item1, ele1) => {
                                        words.push(item1)
                                    })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第7、8组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                    case 9:
                        if (this.mixGroup == 1) {
                            this.cutboxTitle = '第1、2组'
                        }else if (this.mixGroup == 2) {
                            this.cutboxTitle = '第1、2、3组'
                        }else if (this.mixGroup == 3) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4])) {
                                    item.forEach((item1, ele1) => {
                                        words.push(item1)
                                    })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5组'
                        }else if (this.mixGroup == 4) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [3,4,5])) {
                                    item.forEach((item1, ele1) => {
                                        words.push(item1)
                                    })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第4、5、6组'
                        }else if (this.mixGroup == 5) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [0,1,2,3,4,5])) {
                                item.forEach((item1, ele1) => {
                                    words.push(item1)
                                })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第1、2、3、4、5、6组'
                        }else if (this.mixGroup == 6) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [6,7])) {
                                    item.forEach((item1, ele1) => {
                                        words.push(item1)
                                    })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第7、8组'
                        }else if (this.mixGroup == 7) {
                            words = []
                            this.groupWordList.forEach((item, ele) => {
                                if (this.in_array(ele, [6,7,8])) {
                                    item.forEach((item1, ele1) => {
                                        words.push(item1)
                                    })
                                }
                            })
                            this.currentWords = words
                            this.cutboxTitle = '第7、8、9组'
                        }else{
                            this.cutboxTitle = '全部混组'
                        }
                        break;
                }

                this.$refs.cutbox.initData(this.currentWords)
            }
        },
        //学前检测
        learnPrestudyWord(words) {
            savePrestudyWord({learnId: this.learnId, words: words}).then(res => {
                this.loading = false
                if (res.error == 0) {

                }
            }).finally(() => {
                this.loading = false
            })
        },
        //学后检测
        learnFinishFn() {
            let words = []
            if (this.group != this.totalGroup) {
                this.groupWordList.forEach((item, ele) => {
                    if (ele <= this.group - 1) {
                        item.forEach((item1, ele1) => {
                            words.push(item1)
                        })
                    }
                })
            }else{
                this.groupWordList.forEach((item, ele) => {
                    item.forEach((item1, ele1) => {
                        words.push(item1)
                    })
                })
            }
            this.examWords = words
            this.translationShow = []
            this.step = 4
        },
        //学后检测提交
        submitLearn() {
            let param = {
                learnId: this.learnId,
                userId: this.userId,
                courseId: this.chooseCourse,
                box: this.box,
                words: []
            }
            param.type = this.box == 0 ? 1 : 2

            let newWords = []
            let reviewCycleWords = []
            this.rightWords.forEach((item, ele) => {
                newWords.push({
                    id: item,
                    right: 1,
                    type: 1 //学后检测
                })
                reviewCycleWords.push(item)
            })

            this.knowWords.forEach((item, ele) => {
                newWords.push({
                    id: item,
                    right: this.box != 0 ? 1 : 2,
                    type: 2 //学前检测
                })
            })

            this.wrongWords.forEach((item, ele) => {
                newWords.push({
                    id: item,
                    right: 0,
                    type: 1 //学后检测
                })
                reviewCycleWords.push(item)
            })

            if (newWords.length == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '请选择单词' })
                return false
            }
            param.words = newWords

            // 保存抗遗忘复习的词到sessionStorage
            let oldReviewCycleWords = tool.session.get('reviewCycleWords-'+this.learnId) || []
            let _reviewCycleWords = oldReviewCycleWords.concat(reviewCycleWords)
            tool.session.set('reviewCycleWords-'+this.learnId, _reviewCycleWords)


            this.submitLoading = true
            learnSubmit(param).then(res => {
                this.submitLoading = false
                if (res.error == 0) {
                    if (this.box == 8 || (this.rightWords.length == 0 && this.wrongWords.length == 0 && this.knowWords.length)) {
                        this.$router.push({path: '/work/studyattend', query: {learnId: this.learnId, category: this.category}})
                    }else{
                        this.isDialog = true
                    }
                }
            }).finally(() => {
                this.submitLoading = false
            })
        },
        //学后检测选择
        chooseExamWordFun(type, word) {
            if (type == 1) {
                if (this.in_array(word.id, this.rightWords)) {
                    this.rightWords.splice(this.rightWords.indexOf(word.id), 1)
                } else {
                    this.rightWords.push(word.id)
                }
                if (this.in_array(word.id, this.wrongWords)) {
                    this.wrongWords.splice(this.wrongWords.indexOf(word.id), 1)
                }
            } else if (type == 2) {
                if (this.in_array(word.id, this.wrongWords)) {
                    this.wrongWords.splice(this.wrongWords.indexOf(word.id), 1)
                } else {
                    this.wrongWords.push(word.id)
                }
                if (this.in_array(word.id, this.rightWords)) {
                    this.rightWords.splice(this.rightWords.indexOf(word.id), 1)
                }
            }
        },
        //提交抗遗忘
        submitCycelFn(time) {
            let words = tool.session.get('reviewCycleWords-'+this.learnId) || []
            if (words.length == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '无可提交抗遗忘复习词汇' })
                return false
            }

            let param = {
                learnId: this.learnId,
                userId: this.userId,
                courseId: this.chooseCourse,
                time: time,
                words: words
            }

            this.cycleLoading = true
            reviewCycleCreate(param).then(res => {
                this.cycleLoading = false
                if (res.error == 0) {
                    this.$message.success('创建成功')
                    // 清除sessionStorage
                    tool.session.remove('reviewCycleWords-'+this.learnId)
                    let finishTime = this.learnInfo.finishTime
                    // 判断finishTime是否小于当前时间，直接结束本次课程并回到首页
                    if (new Date(finishTime).getTime() < new Date().getTime()) {
                        this.cycleLoading = true
                        endLearn({
                            learnId: this.learnId,
                            userId: this.userId,
                        }).then(res => {
                            if (res.error == 0) {
                                this.$router.push({path: '/index'})
                            }
                        }).finally(() => {
                            this.cycleLoading = false
                        })
                    }else{
                        this.$router.push({path: '/work/studyattend', query: {learnId: this.learnId, category: this.category}})
                    }
                }
            }).finally(() => {
                this.cycleLoading = false
            })
        },
        playAudio(index, word) {
            this.wordPlayStatus = []
            this.currentPlayIndex = index
            this.translationShow[index] = !this.translationShow[index] || this.translationShow[index] == 3 ? 1 : this.translationShow[index] + 1
            if (word.voiceFile) {
                this.voiceUrl = word.voiceFile.url
                this.$nextTick(() => {
                    this.$refs.audio.load()
                    this.$refs.audio.play()
                    this.wordPlayStatus[index] = true
                })
                if (this.translationShow[index] == 3) {
                    this.translationShow[index] = 0
                }
                this.$forceUpdate()
            }
        },
        playEnd() {
            this.wordPlayStatus = []
        },
        playAll() {
            let audio = []
            this.courseWords.forEach((item, ele) => {
                audio.push(item.voiceFile.url)
            })
            this.allPlayIndex = 0
            this.$refs.audio.src = audio[0]
            this.$refs.audio.play()
            this.$refs.audio.addEventListener('ended', () => {
                if (this.allPlayIndex < audio.length - 1) {
                    this.allPlayIndex ++
                    this.$refs.audio.src = audio[this.allPlayIndex]
                    this.$refs.audio.play()
                }
            })
        },
        changeStep() {
            this.step ++
        },
        //继续学习
        continueLearn() {
            this.$router.push({path: '/work/studyattend', query: {learnId: this.learnId, category: this.category}})
        },
        //结束学习创建抗遗忘
        endLearn(type) {
            if (type == 1) {
                if (this.learnInfo.learnType == 2) {
                    this.$router.push({path: '/work/studytype'})
                } else {
                    this.step = 5
                }
            }else{
                //教练教学练习直接结束本次练习
                this.submitLoading = true
                endLearn({learnId: this.learnId, userId: this.userId}).then(res => {
                    if (res.error == 0) {
                        this.$router.push({path: '/work/studytype', query: {userId: this.userId}})
                        if(this.$store.state.user.isFull){
                            this.bearRef.handlemouseenter()
                        }
                    }
                }).finally(() => {
                    this.submitLoading = false
                })
            }
        },
        // 修改学习课程
        changeCourse(course) {
            this.loading = true
            changeLearnCourse({id: this.learnId, courseId: course, userId: this.userId}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.getLearnInfo()
                }
            })
        },
        detection(){
            this.learnFinishFn()
        },
        backFn(){
            let query = {
                learnId: this.learnId,
            }
            if (this.userId) {
                query.userId = this.userId
            }
            this.$router.push({path: '/work/studytype', query: query})
        },
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.result_bg{width: 50.5rem;height: 21.5rem}

::v-deep .el-input__inner{
    background-color: #fff;
    border: 1px solid #fff;
    // text-align: right;
}
::v-deep .el-select-dropdown__item{
    border-bottom: 1px solid #F0F2F4;
    // padding: 2rem 0;
    &:last-child{
        border-bottom:none ;
    }
}
.po{
    width: 0;
    height: 0;
}
.box_cont{
    padding: 2rem 0 0;
}
.title{
    padding-right: 21.7rem;
    padding: 0 68.7rem 0 10rem;
    h2{
        font-size: 3.2rem;
        font-weight: normal;
        display: inline-block;
        color: #fff;

    }
}
.title_cont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    // padding: 0 32px;
    text-align: center;
    padding: 0 10rem;

    h2{
        font-size: 3.2rem;
        font-weight: normal;
        display: inline-block;
        color: #fff;
        margin-right: 31.7rem;
    }
    .right{
        width: 0;
        position: relative;
        .select_cont{
            position: absolute;
            width: max-content;
            top: -18px;
            left: 0px;
            display: flex;
            align-items: center;
        }
    }
}
.test_cont{
    width: 100%;
    margin: 2rem 0 0;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    // flex-wrap: wrap;
    // justify-content: space-between;
    align-content: flex-start;
    padding: 4rem 68.7rem 0 10rem;
    .word_cont{
        width: 100%;
        padding:2rem 2.5rem;
        margin-bottom: 1.5rem;
        border-radius: 10px;
        background: #F7F8FA;
        background: #E8EBFF;
        transition-duration: 0.35s;
        .word_left{
            .word_lish{
                // color:$color8;
                margin-bottom: 5px;
                font-size: 3.6rem;
            }
            .word_text{
                color: #626780;
                font-size: 2.4rem;
            }
        }
        .word_right{
            margin: auto 0;
            img{
                width: 4rem;
                height: 4rem;
                margin-left: 2.4rem;
            }
        }
        &:hover{
            background: #F69B2C;
            .word_lish{
                color: #fff;
            }
            .word_text{
                color: #fff;
            }
        }
    }
    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color:$background-theme;
    }
    &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 5px;
        height:80%;
    }
}
.attend_btn{
    color: #fff;
    width: 100%;
    // margin-top: 40px;
    font-size: 2.4rem;
    padding: 2rem calc(68.7rem + 6px) 2rem  10rem;
    //border-top: 2px solid #4762BB;
}
.num{
    color:$theme-color;
}
.right{
    color:$color8;
}
.wrong{
    color:$background-red;
}


.dialog_box{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    overflow: hidden;
    box-sizing: border-box;
 }
 .detail_cont{
  width: 40%;
  // height: 40vh;
  // background-color: #fff;
  background-image: url(@/assets/img/bj_1.png);
  // background-size: 100% 100%;
  background-size: cover;
  border-radius: 10px;
  position: relative;
  padding: 2rem 9.2rem 4rem;
.row_text{
    font-size: 3.2rem;
    margin: 5rem 0;
    .line{
        color: #B4B6BE;
        margin: 0 5.4rem;
        font-size: 2.2rem;
    }
}
  .btn_cont{
    width: 100%;
    .dialog_btn1{
        width: 40%;
        border-radius: 4px;
        // height: 5.2rem;
        // line-height: 5.2rem;
        text-align: center;
        // background: #fff;
        border: 1px solid #019E69;
        color: #019E69;
        font-size: 2rem;
        margin-right: 2.4rem;
    }
    .dialog_btn{
        width: 100%;
        // height: 5.2rem;
        // line-height: 5.2rem;
        text-align: center;
        border-radius: 4px;
        // background: #019E69;
        color: #fff;
        font-size: 2rem;
    }
  }


 }
 .back_img{
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
.w-full{
    width: 100%;
}
</style>
